<template>
	<fu-popup v-model="visible" mode="bottom" :maskClick="true" :border-radius="24">
		<!-- :style="{ 'background-image': 'url(' + bgImg + ')' }" -->
	<!-- 	<view class="wrap">
			<view class="coupon_content center flex-direction">
				<view class="items" :style="{ 'background-image': 'url(' + itemImg + ')' }"
					v-for="(item, index) in lists" :key="index">
					<view class="left flex-direction">
						<text class="money text-bold">
						<text class="text-sm">￥</text>
						{{ parseInt(item.money) }}</text>
						<text class="text-xs margin-top-xs">满{{parseInt(item.min_order_money)}}可减</text>
					</view>
					<view class="center ">
						<text class="text-bold">{{ item.name }}</text>
						<view>{{item.content}}</view>
						<view>{{i18n['有效期至']}}{{ item.end_time | parseTime }}</view>
					</view>
					<view class="right">
						<view class="buttons" @click.stop.prevent="receive(item)">
							{{i18n['立即领取']}}
						</view>
					</view>
				</view>
			</view>
		</view> -->
		
		<view class="padding xs_bj">
			<view class="flex justify-between padding-bottom">
				<view class="flex-sub text-center xs_title">
					<text class="xs_circle opacity50"></text>
					<text class="xs_circle"></text>
					<text class="xs_text">优惠券</text>
					<text class="xs_circle"></text>
					<text class="xs_circle opacity50"></text>
				</view>
				<view class="close-box" @tap="close"><text class="cuIcon-close"></text></view>
			</view>
			<scroll-view class="container" scroll-y>
				<view class="margin-bottom-sm cu-bg" :class="[item.is_receive == 1 ? 'disabled' : '']" v-for="(item, index) in lists" :key="index">
					<view class="height-228 flex" >
					  <view class="left    text-center flex align-center justify-center flex-direction"
					    style="line-height: .9;color: #F44830;width: 230rpx;min-width: 230rpx;" :class="[item.is_receive == 1 ? 'disabled' : '']">
					    <view>
					      <text class="text-price fu-fs40"></text>
					      <text class="" style="font-size: 40rpx;">{{ item.money  }}</text>
					    </view>
					    <view class="fu-fs24 margin-top-sm text-bold">{{i18n['满']}}{{ item.min_order_money  }}可减</view>
					  </view>
					  <view class="right   flex" style="min-width: 1px;">
					    <view class=" padding flex flex-direction justify-around" style="min-width: 1px;">
					      <view class="text-333 text-bold text-lg text-cut">{{ item.name }}</view>
					      <view class="text-999 text-sm text-cut-2" v-if='item && item.content'>{{item.content}}</view>
					      <view class="text-999 text-sm text-cut">有效期至: {{ item.end_time }}</view>
					    </view>
					    <view class="action  width-60 fu-fs28 flex align-center justify-center def-color"
					      :class="[item.is_receive == 1 ? 'disabled' : '']" @click="receive(item)">{{ item.is_receive == 1 ? '已领取' : '领取'}}
					    </view>
					  </view>
					</view>
					<!-- <fu-coupon :discountPrice="item.money" :name="item.name" :time="item.end_time" :limit="item.min_order_money"
		    :isUse="item.is_receive == 1" @click="receive(item.id, index, item.is_receive)" :item="item"></fu-coupon> -->
				</view>
			</scroll-view>
		</view>
	</fu-popup>
</template>

<script>
	export default {
		data() {
			return {

				lists: [],
				visible: false,
			};
		},
		computed: {
			isLogin() {
				return this.$store.getters.isLogin;
			},
		},
		filters: {
			parseTime(val) {
				return val.split(" ")[0];
			},
		},
		methods: {
			close(){
				this.visible = false
			},
			// 获取首页优惠券弹窗列表
			getCoupon() {
				this.$api
					.get(global.apiUrls.getCouponList, {
						method: 1,
						user_id: this.$store.getters.uid,
					})
					.then((res) => {
						res = res.data;
						if (res.code == 1) {
							let list = res.data.filter(item => item.is_receive == 0);
							this.lists = list.splice(0, 4);
							if (this.lists.length == 0) {
								this.closePopup();
							} else {
								this.openPopup();
							}
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},
			// 展示优惠券弹窗
			openPopup() {
				this.visible = true;
			},
			// 关闭优惠券弹窗
			closePopup() {
				this.visible = false;
			},
			async receive(item) {
				this.$util.actionAuth(() => {
					this.$api
						.post(global.apiUrls.postReceiveCoupon, {
							cid: item.id,
						})
						.then((res) => {
							if (res.data.code == '1') {
								this.$message.info("领取成功");
								this.getCoupon()
								
								console.log('我在哪儿呢？1')
							} else if (res.data.code == 0) {
								this.closePopup();
								this.$message.info(res.data.msg);
								console.log('我在哪儿呢？2')
							} else {
								this.closePopup();
								this.$message.info(res.data.msg);
								console.log('我在哪儿呢？3')
							}
						})
						.catch((err) => {
							this.closePopup();
							console.log('我在哪儿呢？4',err)
						});
				});
			},
		},
		created() {
			this.getCoupon();
		},
	};
</script>

<style lang="scss" scoped>
	.right {
			padding: 22rpx 0;
			width: 100%;
			    display: flex;
    justify-content: space-between;
    padding-right: 58rpx;

		  .action {
		    border-top-right-radius: 16rpx;
		    border-bottom-right-radius: 16rpx;
		    // background: linear-gradient(359deg, #FE8B20 0%, #FE5114 100%);
		    // writing-mode: tb-rl;
		    // letter-spacing: 6rpx;
			font-weight: bold;
		  }
		
		  .action.disabled {
		    // background: #999999;
		  }
		}
		
		.left {
		  border-top-left-radius: 16rpx;
		  border-bottom-left-radius: 16rpx;
		  padding-left: 60rpx;
		  // background: linear-gradient(359deg, #FE8B20 0%, #FE5114 100%);
		
		  &.disabled {
		    color: #999999!important;
		  }
		}
	.xs_bj {
		background: #f7f7f7;
		word-break: break-all;
	}
	.container {
		height: 700rpx;
	}
	.xs_title {
		font-size: 36upx;
		font-weight: bold;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;
		.xs_text {
			padding: 0 18upx;
			margin-top: 10upx;
		}
		.xs_circle {
			width: 10upx;
			height: 10upx;
			background: $theme;
			border-radius: 50%;
			margin: 0 6upx;
		}
		.opacity50 {
			opacity: 0.5;
		}
	}
	
	.cu-bg{
		// background-image: url($IMG_BASE_URL + 'goods/cu-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		 &.disabled{
			 // background-image: url($IMG_BASE_URL + 'goods/cu-bgd.png');
			 background-size: 100% 100%;
			 background-repeat: no-repeat;
			
		 }
	}
	.height-228{
		height: 228rpx;
	}
	.def-color{
		color: #C95A38;
		&.disabled {
		  color: #ffffff;
		}
	}
</style>
